<template>
    <div class="pay-list">
        <div class="mui-card" v-for="order in orderlist" :key="order.id">
            <div class="mui-card-header">
                <span class="title">{{ order.create_time }}</span>
                <span>
                    <span v-if="order.is_pay">已支付</span><span v-else>未支付</span> |
                    <span v-if="order.is_cancel">已取消</span>
                    <span v-else @click="cancel(order.id)">取消订单</span>
                </span>
            </div>
            <div @click="show(order.id)" class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="cover" v-for="item in order.user_order_goods" :key="item.id">
                        <div class="img-con">
                            <img :src="item.goods_goods.image">
                        </div>
                        <div class="img-tag">x{{ item.count }}</div>
                    </div>
                </div>
            </div>
            <p>实付金额：<span>¥{{ order.price }}</span></p>
        </div>
    </div>
</template>

<script>
export default {
    created () {
        this.getOrderList()
    },
    data () {
        return {
            orderlist: []
        }
    },
    methods: {
        getOrderList () {
            this.$indicator.open({
                text: '加载中'
            })
            this.$http.get('order/list').then(res => {
                this.$indicator.close()
                if (res.data.code === 0) {
                    this.$toast(res.data.msg)
                } else if (res.data.code === 1) {
                    if (res.data.data.length) {
                        this.orderlist = res.data.data
                    } else {
                        this.$toast('订单为空')
                    }
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' })
                }
            })
        },
        show (id) {
            this.$router.push({ name: 'order_show', params: { id: id } });
        },
        cancel (id) {
            this.$indicator.open({
                text: '取消中'
            })
            this.$http.post('order/cancel', { id: id }).then(res => {
                this.$indicator.close()
                if (res.data.code === 0) {
                    this.$toast(res.data.msg)
                } else if (res.data.code === 1) {
                    this.getOrderList()
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.pay-list p {
    padding: 0 10px;
    text-align: right;

    span {
        color: #151515;
    }
}

.mui-card-header {
    color: #999;
    font-size: 13px;

    span.title {
        font-size: 13px;
        color: #888;
    }
}

.mui-card-content-inner {
    .cover {
        position: relative;
        width: 70px;
        height: 70px;
        display: inline-block;
        margin-right: 10px;

        .img-con {
            width: 100%;
            height: 100%;
            margin-right: 10px;
            border-radius: 2px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 2px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%, -50%, 0);
            }
        }

        .img-tag {
            position: absolute;
            opacity: .5;
            background: #000;
            color: #fff;
            text-align: center;
            font-size: 12px;
            right: 0;
            bottom: 0;
            padding: 0 5px;
            border-radius: 2px 0;
        }
    }
}
</style>